<template>
  <div>
    <van-popup v-model:show="dialogShow" :close-on-click-overlay="false">
      <div class="main">
        <!-- 标题 -->
        <div class="title"></div>
        <!-- 主体区域 -->
        <div class="content">
          <div class="mid">
            <div class="top all-box">
              <div class="box">
                <div class="gift-info">
                  <div class="gift-title">{{ data.castle.title }}</div>
                  <div class="icon">
                    <div class="tag">7天</div>
                    <img :src="data.castle.icon" alt="" />
                  </div>
                  <div class="name">{{ data.castle.name }}</div>
                </div>
              </div>
              <div class="box">
                <div class="gift-info">
                  <div class="gift-title">{{ data.horse.title }}</div>
                  <div class="icon">
                    <div class="tag">{{ data.horse.day }}天</div>
                    <img :src="data.horse.icon" alt="" />
                  </div>
                  <div class="name">{{ data.horse.name }}</div>
                </div>
              </div>
            </div>
            <div class="buttom all-box">
              <div class="box">
                <div class="gift-info">
                  <div class="gift-title">{{ data.house.title }}</div>
                  <div class="icon">
                    <div class="tag">{{ data.house.day }}天</div>
                    <img :src="data.house.icon" alt="" />
                  </div>
                  <div class="name">{{ data.house.name }}</div>
                </div>
              </div>
              <div class="box">
                <div class="gift-info">
                  <div class="gift-title">{{ data.party.title }}</div>
                  <div class="icon">
                    <div class="tag">{{ data.party.day }}天</div>
                    <img :src="data.party.icon" alt="" />
                  </div>
                  <div class="name">{{ data.party.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="footer">
            <div class="gift-info">
              <div class="gift-title">{{ data.child.title }}</div>
              <div class="list">
                <div v-for="item in data.child.item" :key="item.name" class="item">
                  <div class="icon">
                    <div class="tag">{{ item.day }}天</div>
                    <img :src="item.icon" alt="" />
                  </div>
                  <div class="name">{{ item.name }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 关闭图标 -->
      <div class="close" @click="onClose"></div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import avatar from '@/assets/childrenDay/avatr.png'
import special from '@/assets/childrenDay/special.png'
import bubble from '@/assets/childrenDay/bubble.png'
import sound from '@/assets/childrenDay/sound.png'
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
})
const dialogShow = computed(() => {
  return props.show
})
// 弹窗关闭
const emit = defineEmits(['close'])
const onClose = () => {
  emit('close', 'award')
}

// 假数据测试
const data = ref({
  castle: {
    title: '魔法城堡',
    icon: avatar,
    name: '大童小忆头像框',
    day: 3,
  },
  horse: { title: '旋转木马', icon: special, name: '大童小忆入场特效', day: 7 },
  house: { title: '飞屋妙想', icon: bubble, name: '大童小忆公屏气泡', day: 7 },
  party: { title: '童心派对', icon: sound, name: '大童小忆声波', day: 7 },
  child: {
    title: '大童小忆',
    item: [
      {
        icon: avatar,
        name: '大童小忆头像框',
        day: 30,
      },
      {
        icon: special,
        name: '大童小忆入场特效',
        day: 30,
      },
      {
        icon: bubble,
        name: '大童小忆公屏气泡',
        day: 30,
      },
      {
        icon: sound,
        name: '大童小忆声波',
        day: 30,
      },
    ],
  },
})
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>
